<template>
	<view>

		<view v-for="(item,index) in list" :key="index"
			:style="{backgroundImage:'url('+$ftpUrl( user.levelName==item.levelName?'app/images/bg_c.png':'app/images/bg_b.png')+')'}"
			class="list">
			<view style="font-weight: bold;font-size: 36rpx;padding-top: 40rpx;">{{item.levelName}}</view>

			<view  v-if="user.levelName==item.levelName"
				style="position: absolute;left: 0;width: 150rpx;border-radius: 0 20rpx 20rpx 0;top: 0;background: #0064C6;font-size: 24rpx;padding:10rpx 0;top: 20rpx;">
				当前等级</view>

			<view class="u-margin-top-30 u-margin-bottom-10">
				<text v-if=" user.levelName==item.levelName">我的消费：{{user.totalMoney}}</text>
				<text v-if=" user.levelName==item.levelName" style="margin: 0 20rpx;font-size: 24rpx;">|</text>
				<text> 消费升级：￥{{item.totalMoney}}</text>

			</view>
			<view class=" u-font-xs">
				会员折扣：{{(item.buyRatio/10)==10?'无折扣':item.buyRatio/10+'折'}}
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				user: {

				}
			}
		},
		onLoad() {
			this.$u.post('/api/index/level', {

			}).then(res => {
				this.list = res;
			}).catch(err => {

			})


			this.$u.api.userInfo().then(res => {
				this.user = res;

			}).catch(err => {

			})


		}
	}
</script>

<style>
	.list {
		background-size: cover;
		background-repeat: no-repeat;
		width: 700rpx;
		height: 240rpx;
		margin: 20rpx auto;
		color: #fff;
		text-align: center;
		position: relative;

	}
</style>
